<template>
  <view>
    <view class="information">
      <text class="subject">预约服务：{{ order.project.name }}</text>
      <text class="subject">预约时间：{{ order.createtime }}</text>
      <text class="subject">
        服务费用：{{ order.price ? order.price : 0 }}元
      </text>
      <text class="subject">上门地址：{{ order.address.address_text }}</text>
      <text class="subject">预约状态：{{ order.status_text }}</text>
      <!-- <text class='end-time begin-time'></text> -->
    </view>

    <view class="steps">
      <u-steps :current="current" direction="column">
        <u-steps-item
          title="未接单"
          desc="订单等待师傅接单"
          v-if="order.status == 0 || order.status > 0"
        >
        </u-steps-item>
        <u-steps-item
          title="已接单"
          desc="已完成"
          v-if="order.status >= 1 || order.status < 0"
        >
        </u-steps-item>
        <u-steps-item
          title="未付款"
          desc="等待付款中"
          v-if="order.status == 1 || order.status < 0"
        >
        </u-steps-item>
        <u-steps-item
          title="已付款"
          desc="已完成"
          v-if="order.status > 1 || order.status < 0"
        >
        </u-steps-item>
        <u-steps-item
          title="等待师傅上门"
          desc="等待中"
          v-if="order.status == 2 || order.status < 0"
        >
        </u-steps-item>
        <u-steps-item
          title="预约服务已完成"
          desc="已完成"
          v-if="order.status >= 3"
        >
        </u-steps-item>
        <u-steps-item
          title="待评价"
          desc="等待中"
          v-if="order.status == 3 && !order.rate"
        >
        </u-steps-item>
        <u-steps-item
          title="已评价"
          :desc="order.rate + '分'"
          v-if="order.status == 3 && order.rate"
        >
        </u-steps-item>
      </u-steps>
    </view>

    <!-- 消息提示的组件 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
<script>
export default {
  onLoad(option) {
    let orderid = option.orderid

    this.orderid = orderid

  },

  onShow() {
    this.Info()
  },
  data() {
    return {
      orderid: 0,
      order: {},
      current: 0
    }
  },
  methods: {
    async Info() {
      let data = {
        orderid: this.orderid
      }
      let result = await this.$u.api.project.OrderInfo(data)

      if (result.code === 0) {
        this.$refs.notice.show({
          type: 'error',
          message: result.msg,
          icon: true,
          complete: () => {
            this.$u.route({
              type: 'navigateBack',
              delta: 1
            })
          }
        })

        return false
      }

      console.log(result.data)
      let status_text = result.data.status_text
      console.log(result.data.status_text);
      // 使用switch语句
      switch (status_text) {
        case "未接单":
          this.current = 0
          break;
        case "待付款":
          this.current = 2
          break;
        case "已付款":
          this.current = 3
          break;
        case "已完成":
          this.current = 5
          break;
        default:
          this.current = 0
          break;
      }

      // 使用if语句
      // if (status == 0 && status > 0) { this.current = 0 }
      // else if (status >= 1 && status < 0) { this.current = 1 }
      // else if (status == 1 && status < 0) { this.current = 2 }
      // else if (status > 1 && status < 0) { this.current = 3 }
      // else if (status == 2 && status < 0) { this.current = 4 }
      // else if (status >= 3) { this.current = 5 }
      // else if (status == 3 && !result.data.rate) { this.current = 6 }
      // else if (status == 3 && result.data.rate) { this.current = 7 }

      // this.current = result.data.status
      console.log(this.current)
      this.order = result.data
    }
  },
}
</script>

<style>
.information {
  border-top: 1rpx solid rgb(194, 194, 194);
  border-bottom: 30rpx solid rgb(240, 240, 240);
  padding: 30rpx;
  box-shadow: 0 0 10px #ddd;
}
.begin-time,
.end-time {
  font-size: 30rpx;
  color: rgb(140, 140, 140);
}
.information text {
  display: block;
  margin-top: 10px;
}
.steps {
  width: 80%;
  margin: 0 auto;
}
</style>